<template>
  <el-table :data="data" style="width: 100%">
    <template
      v-for="(item, index) in td"
      :key="index"
    >
      <el-table-column
        v-if="item.slotName == ''"
        :prop="item.name"
        :label="item.title"
        width="110"
      >
      </el-table-column>
      <el-table-column
        v-else
        :prop="item.name"
        :label="item.title"
        width="110"
      >
        <template #default="scope">
          <slot :name="item.slotName" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </template>
   
  
  </el-table>
</template>

<script>
  import { reactive, useSlots } from 'vue'
  import { ElTable, ElTableColumn } from 'element-plus'


</script>

<script setup>

  const props = defineProps({
    data: Array
  })
 
  const ctx = useSlots()
  console.log('ctx', ctx)

  const td = reactive([
    {
      title: '姓名',
      name: 'name',
      slotName: ctx['name'] ? 'name': ''
    },
    {
      title: '年龄',
      name: 'age',
      slotName: ctx['age'] ? 'age': ''
    },
    {
      title: 'URL',
      name: 'url',
      slotName: ctx['url'] ? 'url': ''
    }
  ])


  const tt = (msg) => {
    console.log(msg)
    const foo = {}
    Object.assign(foo, msg)
    console.log('foo：', foo)

  }
</script>